<template>
	<view class="tabbar-height"></view>
	<view class="BaseBottom ">
		<view class="BaseBottomBox tabbar-height">
			<view class="BaseBottomBoxItem" v-for="(v, i) in tabbarList" :key="i" @tap="goLink(v)">
				<image class="iconSee" :src="path == v.link ? v.selectedIconPath : v.iconPath" mode="aspectFit"></image>
				<view class="textSee" :style="path == v.link ? 'color: #49961F;' : 'color:#999999;'">{{ v.text }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// import sheep from "@/sheep"
	import { ordinary,merchant } from "@/sheep/tabbar/index.js"
	
	const state = reactive({
		
	})
	
	const props = defineProps({
		path:{
			type:String,
			default:''
		}
	})
	
	const tabbarList = computed( () =>  {
		// return sheep.$store('user').currentRole == 'merchant'?merchant:ordinary
	}) 
	
	function goLink(v) {
		if(v.link == props.path) return
		uni.switchTab({
			url: v.link
		})
	}
</script>

<style scoped lang="scss">	
	.BaseBottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-top: 1rpx solid #f2f2f2;		
		box-shadow: 0px -4px 8px 2px rgba(198,198,198,0.25);
		.BaseBottomBox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			width: 100%;

			.BaseBottomBoxItem {
				// width: 33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.iconSee {
					width: 48rpx;
					height: 48rpx;
				}

				.textSee {
					font-size: 28rpx;
					margin-top: 14rpx;
				}
			}
		}
	}
</style>
